<template>
  <div style="display: flex;">
    <el-form-item  label="车位搜索：">
      <div style="display: flex;">
        <el-input v-model="findparams.keyword" 
        placeholder="输入车位编号/车牌号快速检索"
        style="width: 300px;"></el-input>
        <el-button type="primary" plain @click="getTableData" size="large" style="margin-left: 10px; margin-right: 10px;">搜索</el-button>
         <el-select
            v-model="findparams.part"
            placeholder="全部车位"
            size="large"
            style="width: 240px"
            @change="getTableData">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
        </el-select>
      </div>
    </el-form-item>
  </div>
  <el-table :data="tableData.records" style="width: 100% ;height: 77vh;">
    <el-table-column prop="spaceNumber" label="车位编号" width="auto"/>
    <el-table-column prop="location" label="车位区域" width="auto"/>
    <el-table-column prop="carNumber" label="绑定车辆" width="auto" />
    <el-table-column prop="userName" label="所属用户" width="auto" />
    <el-table-column prop="state" label="车位状态" width="auto">
      <template #default="scoped">
        <p v-if="scoped.row.state == 0" style="color: green;">空闲</p>
        <p v-else-if="scoped.row.state == 1"  style="color: red;">租赁中</p>
        <p v-else-if="scoped.row.state == 2">已出售</p>
      </template>
    </el-table-column>
    <el-table-column prop="userName" label="车位使用时间" width="400px" >
       <template #default="scoped">
        <p v-if="scoped.row.state != 0" >{{scoped.row.startTime}} —— {{scoped.row.endTime}}</p>
        <p v-else-if="scoped.row.state == 0" style="color: green;">待租赁</p>
      </template>
    </el-table-column>
    <el-table-column  label="操作" width="auto">
      <template #default="scoped">
        <el-button v-if="scoped.row.state == 0" plain type="primary" @click="dialogShow(scoped.row.id,false)">绑定用户</el-button>
        <el-button v-else plain type="primary" @click="dialogShow(scoped.row.id,true)">修改绑定</el-button>
      </template>
    </el-table-column>
  </el-table>
    <el-pagination 
    style="margin-top: 10px;" 
    background
    :page-count="tableData.pages"
    v-model:current-page="params.pageNo"
    @current-change="getTableData"
    :total="tableData.total">
  </el-pagination>
  <el-dialog 
      draggable
      :model-value="dialog.show"
      width="500px"
      :before-close="handleClose"
      :close-on-click-modal="false">
     <Authorization
      v-if="dialog.show"
      @getTableData="getTableData"
      v-model:show="dialog.show"
      v-model:key="dialog.key"
      :id="dialog.id"
     />
  </el-dialog>
</template>

<script  setup>
import { _axios,request,get,post } from '@/plugins/axios' 
import { ref,reactive } from 'vue'
import path from './path'
import Authorization from './updateUser.vue'
let tableData = ref({})
// 分页的数据，作为分页查询get的参数
const params = reactive({
  pageNo : 1,
  pageSize: 13
})
const findparams = reactive({
  keyword:null,
  order: false,
  part: '请选择车位分区'
})
const dialog = reactive({
  detailshow:false,
  show:false,
  title:'',
  id:null,
  key:false
});
const options = ref([
  { value: null, label: '全部区域'},
  { value: "A", label: 'A区'},
  { value: "B", label: 'B区'},
  { value: "C", label: 'C区'},
  { value: "D", label: 'D区'},
])
// 页面渲染的时候先获取一次，初始化
getTableData()
// 获取数据
function getTableData(){
  if(findparams.keyword != null){
    params.keyword = findparams.keyword
  }
  params.part = findparams.part
  get(path.list,params,content => {
    tableData.value = content
  })
}
function dialogShow(id,key){
    dialog.key = key
    dialog.id = id
    dialog.show = true
}
// 对话框关闭事件
function handleClose(){
    // 将表单隐藏
    dialog.id = null
    dialog.show = false
} 
</script>

<style scoped lang='scss'>

</style>